<template>
  <div class="app-container">
    <el-card>
      <div class="block">
        <el-row :gutter="15">
          <el-col :span="3">
            <el-input
              v-model="listQuery.username"
              size="small"
              placeholder="请输入帐号"
              clearable
            />
          </el-col>
          <el-col :span="3">
            <el-input
              v-model="listQuery.realname"
              size="small"
              placeholder="请输入姓名"
              clearable
            />
          </el-col>
          <el-col :span="3">
            <el-select
              v-model="listQuery.is_active"
              size="small"
              placeholder="账号状态"
              clearable
            >
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select
              v-model="listQuery.role"
              size="small"
              placeholder="角色"
              clearable
            >
              <el-option
                v-for="item in roleList"
                :key="item.name"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-col>

          <el-col :span="4">
            <el-button
              type="success"
              size="small"
              icon="el-icon-search"
              @click.native="handleFilter"
              >搜索</el-button
            >
            <el-button
              type="primary"
              size="small"
              icon="el-icon-refresh"
              @click.native="resetFilter"
              >重置</el-button
            >
          </el-col>
        </el-row>
        <br />
        <el-row>
          <el-col :span="24">
            <el-button
              v-permission="['admin', 'prize_add_account']"
              type="primary"
              size="small"
              icon="el-icon-plus"
              @click.native="showCreateDialog"
              >同步数据中心新增用户</el-button
            >
          </el-col>
        </el-row>
      </div>

      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        :header-cell-style="{ background: '#f5f7fa' }"
        max-height="650"
        style="width: 100%;"
      >
        <el-table-column label="账号" align="center" prop="username" />
        <el-table-column label="姓名" align="center" prop="realname" />
        <el-table-column label="角色" align="center" prop="roles_name" />
        <el-table-column label="账号状态" align="center">
          <template slot-scope="{ row }">
            <el-tag :type="row.is_active | statusFilter">
              {{ row.is_active | typeFilter }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="created_time" />
        <el-table-column label="操作" min-width="170px" align="center">
          <template slot-scope="{ row }">
            <!-- 
              v-permission="['admin', 'base_update_account']" -->
            <el-button
              type="primary"
              size="mini"
              plain
              v-permission="['admin', 'prize_update_account']"
              icon="el-icon-edit"
              @click.native="showUpdateDialog(row)"
            >
              修改
            </el-button>
            <!-- <el-button
              type="danger"
              size="mini"
              plain
              v-permission="['admin', 'prize_update_account']"
              icon="el-icon-delete"
              @click.native="handleDelete(row, $index)"
            >
              删除
            </el-button> -->
            <!-- <el-button
              type="info"
              size="mini"
              plain
              icon="el-icon-s-operation"
              @click.native="showResetPasswordDialog(row)"
            >修改密码</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="getList"
      />
    </el-card>

    <el-dialog
      :title="textMap[accountDialogStatus]"
      :visible.sync="dialogFormVisible"
      width="70%"
    >
      <el-form
        ref="form"
        status-icon
        :model="temp"
        :rules="rulesList"
        label-width="140px"
        label-position="right"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="账号" prop="username">
              <el-input
                v-show="accountDialogStatus == 'create'"
                v-model="temp.username"
              />
              <el-input
                v-show="accountDialogStatus == 'update'"
                v-model="temp.username"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名" prop="realname">
              <el-input v-model="temp.realname" autocomplete="off" />
            </el-form-item>
          </el-col>
          <template v-if="accountDialogStatus == 'create'">
            <el-col :span="12">
              <el-form-item label="密码" prop="password">
                <el-input v-model="temp.password" autocomplete="off"
              /></el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="确认密码" prop="checkPassword">
                <el-input v-model="temp.checkPassword" autocomplete="off" />
              </el-form-item>
            </el-col>
          </template>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="telephone">
              <el-input v-model="temp.telephone" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="账号状态" prop="is_active">
              <el-switch
                v-model="temp.is_active"
                active-text="启用"
                inactive-text="禁用"
              />
            </el-form-item>
          </el-col>
          <el-col v-permission="['admin']" :span="24">
            <el-form-item label="是否为超级管理员" prop="is_superuser">
              <el-switch
                v-model="temp.is_superuser"
                active-text="是"
                inactive-text="否"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色">
              <el-select
                v-model="temp.roles"
                placeholder="角色"
                clearable
                multiple
                style="width:100%"
              >
                <el-option
                  v-for="item in dialogRoleList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
              <!-- <el-tree
                ref="tree"
                :check-strictly="checkStrictly"
                :data="roleTree"
                :props="defaultProps"
                show-checkbox
                node-key="id"
              /> -->
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="
            accountDialogStatus === 'create' ? createData() : updateData()
          "
        >
          确定
        </el-button>
        <el-button @click.native="dialogFormVisible = false">
          取消
        </el-button>
      </div>
    </el-dialog>

    <el-dialog title="重置密码" :visible.sync="resetPasswordDialogVisible">
      <el-form
        ref="resetForm"
        :model="form"
        :rules="resetPasswordRulesList"
        label-width="120px"
      >
        <el-form-item label="新密码" prop="new_password">
          <el-input v-model="form.new_password" style="width:70%" />
        </el-form-item>
        <el-form-item label="再次输入新密码" prop="checked_new_password">
          <el-input v-model="form.checked_new_password" style="width:70%" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetPasswordDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleResetPassword">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script src="./account.js"></script>

<style>
.block {
  padding: 10px 0px;
}
</style>
